<template>
  <div class="container">
    <div class="header">
        <div class="icon">X</div>
        <div class="title">机器人指南</div>
        <div class="icon">...</div>
    </div>
    <div class="main">
        <div class="navi">
            <div class="videoplay">
                <img src="../assets/cover.png" alt="" class="img_play">
                
            </div>
            <div class="play">
                <img src="../assets/play.png" alt="" class="img_playicon">
            </div>
        </div>
        <div class="detail">
            <!-- 组件 -->
            <div class="bigPic">
                <div class="image_big">
                    <img :src="image_big" >
                </div>
                <div class="button_big">{{buttonText}}</div>
            </div>
            <div class="images" >
                <Card v-for="(item,index) in images" :key="index" :url="item.url" :title="item.title" />
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="left">
            <div>咨询更多问题</div>
            <div>请联系客户经理</div>
        </div>
        <div class="right">
            <div class="buttonContent">
                <img src="../assets/icon.png" alt="" class="icon">
                <span class="name">客户经理</span>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import Card from './Card.vue';

export default {
  name: 'Home',
  data(){
      return {
          image_big: require("../assets/image7.png"),
          images: [
            {
              url: require("../assets/1.png"),
              title: '如何开通机器人小S专属证券账户?'
            },
            {
              url: require("../assets/1.png"),
              title: '如何运行股票和资金授权?'
            },
            {
              url: require("../assets/1.png"),
              title: '如何进行实名认证和风险评测?'
            },
            {
              url: require("../assets/1.png"),
              title: '为什么要进行实名认证?'
            },
          ],
          buttonText: "点击查看"
      }
  },
  components: {
    Card
  }
}
</script>

<style>
.container {
    width: 100vw;
    height: 100vh;
}
.header {
    /* 固定 */
    height: 7vh;
    width: 100vw;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-around;

}
.footer {
    /* 固定 */
    height: 9vh;
    width: 100vw;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}
.left {
    margin: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.icon {
    width: 16px;
    height: 16px;
    margin-right: 10px;
}
.buttonContent {
    margin: 10px 10px;
    background-color: #ffaf10;
    color: #fff;
    border-radius: 30px;
    padding: 10px 0;
    width: 56vw;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.main {
    display: flex;
    flex-direction: column;
}
.navi {
    background-image: url(../assets/image1.png);
    background-size: 102vw 62vh;
    background-position: bottom  right 0vw;
    width: 100vw;
    height: 62vh;
}
.videoplay {
    transform: translateY(29vh);

}
.img_play {
    width: 95vw;
    height: 29vh;
    border-radius: 0 10px 10px 10px;
}
.play {
    transform: translateY(11vh);

}
.img_playicon {
    width: 2rem;
    height: 2rem;
    z-index: 999;
}

.detail {
    background-image: url(../assets/image2.png);
    background-size: 102%;
    background-position: bottom -9vh right;
    width: 100vw; 
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.images {
    width: 98vw;
    display: flex;
    flex-flow: row wrap;

}

.bigPic {
    width: 95vw;
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}
.image_big {
    border-radius: 5px;
    width: 96%;
    margin: 5px 0;
}
.image_big img {
    width: 100%;
    /* height: 170px; */
    height: 25vh;
}
.button_big {
   border-radius: 30px;
   color: #fff;
   background-color: #76c1ff;
   width: 96%;
   margin: 5px 0 15px; 
   padding: 10px 0;
}
</style>